<template>
  <div class="product-div">
    <div class="product-list">
      <el-row>
        <el-col :span="7" v-for="(product, index) in productList" :key="product.id" :offset="index % 3 > 0 ? 1 : 0">
          <el-card class="product-card">
            <img
              :src="product.picture"
              class="product-img"
            />
            <div>
              <p>{{product.name}}</p>
              <div>
                <el-button type="primary" @click="productDetail(product)">详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      currentPage:1,
      productList:[],
    };
  },
  mounted() {
    this.currentPage = 1;
    this.getProductList(this.currentPage);
  },
  methods: {
    async getProductList(val) {
      const { data: res } = await this.$http.get("/Product/getProductList/" + val);
      if (res.code == 200) {
        // console.log(res)
        this.productList = res.data.Product;
        
      } else {
        this.$message({
          type: "info",
          message: "获取用户列表失败"
        });
      }
    },
    productDetail(product){
      // console.log(product)
      sessionStorage.removeItem('product');
      sessionStorage.setItem('product', this.$qs.stringify(product));
      this.$router.push({path:'/productDetail'});
    }
  }
};
</script>

<style lang="less" scoped>
.product-div {
  width: 60%;
  margin: auto;
}
.product-img {
  width: 100%;
  // height: 200px;
  max-height: 300px;
}
.product-card {
  margin-top: 50px;
}
</style>